<template>
	<transition name="fade">
		<div class="fullscreen_ad" v-if="isShow">
			<a @click="closeAd($event)" class="close_ad">跳过广告({{count}})</a>
			fullscreen ad
		</div>
	</transition>
</template>
<script>
	export default {
		name: "FullScreenAd",
		data: function(){
			return{
				fstimeout: null,
				isShow: true,
				count:3
			}
		},
		watch:{
			isShow:function(){
				this.$store.commit("setAd", {
					fullScreenAd: this.isShow
				});
			}
		},
		created: function(){
			let that = this;
			this.fstimeout && clearTimeout(this.fstimeout);
			this.fstimeout = setInterval(() => {
				that.$set(that, "count", (that.count-=1));
				if (that.count === -1)
					that.$set(that, "isShow", false);
			}, 1000)
		},
		methods:{
			closeAd(e){
				this.fstimeout && clearTimeout(this.fstimeout);
				this.$set(this, "isShow", false);
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.fullscreen_ad{
		background-color: #fff;
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index: 999999;
		a{
			&.close_ad{
				display:block;
				position: absolute;
				top:20/@base;
				right:20/@base;
				font-size:16/@base;
				z-index: 99;
			}
		}
	}
</style>